<template>
  <a-modal v-model="logVisible" title="操作日志">
    <div class="log-container" ref="log"></div>
    <template slot="footer">
      <a-button key="back" @click="handleCancel">
        关闭
      </a-button>
      <a @click="clearDownloadUrl" target="_blank" :href="downloadUrl" style="margin-left: 5px">
        <a-button type="primary">下载</a-button>
      </a>
    </template>
  </a-modal>
</template>

<script>
  export default {
    name: 'TerminalLogs',
    props: {},
    data(){
      return{
        logVisible: false,
        downloadUrl: ''
      }
    },
    methods: {
      init(value) {
        this.logVisible = true
        this.$api.getOperateLog({token: value}).then(res => {
          this.$refs.log.innerHTML = res.data.replace(/(\n|\r|\r\n|↵)/g, '<br/>')
        }).catch(err => {
          console.log(err)
        })
        this.downloadUrl = this.$api.fileDownloadExec({ token: value })
        console.log(this.downloadUrl)
      },
      clearDownloadUrl() {
        setTimeout(() => {
          this.downloadUrl = null
        })
      },
      handleCancel(e) {
        this.logVisible = false;
      },
    }
  }
</script>

<style scoped>
.log-container {
  padding: 10px;
  background-color: #f0f5fc;
  border-radius: 10px;
  max-height: 40vh;
  overflow-y: auto;
}
</style>
